<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
  	$(document).bind("mobileinit", function() {  
    	$.mobile.defaultPageTransition = "slide";
　　  	$.mobile.defaultDialogTransition = "slide";  
  	});
  	</script>
	<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
	<script src="js/layer.m.js"></script>
	<style type="text/css">
  	#search {
  		line-height: 40px;
    	font-size: 16px;
  	}
  	#logo{
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	}
  </style>
</head>
<body>

	<div data-role="page" id="home">
		<!-- header 开始 -->
		<div data-role="header" data-tap-toggle="false" data-position="fixed">
			<a data-role="button" title="Home" href="http://swpucourse.sinaapp.com/">首页</a>
			<h1>蹭课小应用</h1>
			<a data-role="button" title="Back" href="http://swpucourse.sinaapp.com/">返回</a>
		</div>
		<!-- header 结束 -->

		<!-- content 开始 -->
		<div data-role="content" role="main">
			<!-- <center>
				<img id="logo" src="http://2.swpucourse.sinaapp.com/img/logo.jpg" width="35%" />
			</center> -->
			<br>
			<div>
				<form id="form">
					<input class="search" type="text" name="search" id="search" autocomplete="off">

					<div data-role="fieldcontain">
						<fieldset data-role="controlgroup" >
							<input type="radio" name="ch" data-theme="c" id="course" value="1" checked="checked" />
							<label for="course">我要选有兴趣的课程</label>
							<input type="radio" name="ch" data-theme="c" id="teacher" value="2" />
							<label for="teacher">我要选喜欢的老师</label>
						</fieldset>
					</div>

				</form>
				<button id="enter" data-theme="f">查询( ˘ ³˘)♥"</button>
			</div>
		</div>
		<!-- content 结束 -->

		<!-- footer 开始 -->
		<div data-role="footer" data-position="fixed" data-tap-toggle="false">
			<h1>Powered By lishengcn.cn</h1>
		</div>
		<!-- footer 结束 -->
	</div>

	<div data-role="page" id="teacher_page">
		<!-- header 开始 -->
		
		<div data-role="header" data-tap-toggle="false" data-position="fixed">
			
			<a data-role="button" title="Home" href="http://swpucourse.sinaapp.com/">首页</a>
			<h1>蹭课小应用</h1>
			<a data-role="button" title="Back" href="http://swpucourse.sinaapp.com/">返回</a>
		</div>
		<!-- header 结束 -->

		<!-- content 开始 -->
		<div data-role="content" role="main">
			<ul data-role="listview" data-icon="false" id="teacher_list"></ul>
		</div>
		<!-- content 结束 -->

		<!-- footer 开始 -->
		<div data-role="footer" data-position="fixed" data-tap-toggle="false">
			<h1>Powered By lishengcn.cn</h1>
		</div>
		<!-- footer 结束 -->
	</div>

	<div data-role="page" id="course_page">
		<!-- header 开始 -->
		
		<div data-role="header" data-tap-toggle="false" data-position="fixed">
			
			<a data-role="button" title="Home" href="http://swpucourse.sinaapp.com/">首页</a>
			<h1>蹭课小应用</h1>
			<a data-role="button" title="Back" href="http://swpucourse.sinaapp.com/">返回</a>
		</div>
		<!-- header 结束 -->

		<!-- content 开始 -->
		<div data-role="content" role="main">
			<ul data-role="listview" data-icon="false" id="course_list"></ul>
		</div>
		<!-- content 结束 -->

		<!-- footer 开始 -->
		<div data-role="footer" data-position="fixed" data-tap-toggle="false">
			<h1>Powered By lishengcn.cn</h1>
		</div>
		<!-- footer 结束 -->
	</div>
	<script type="text/javascript">
  $(document).ready(function(){


    $("#enter").click(function(event) {
      if ($("#search").val() == '') {
        layer.open({
          content: '请输入你要查询的信息哦<b>( ˘ ³˘)!♥♥</b>',
          btn: ['好的，么么哒']
        });
      } else {
        $.ajax({
          url: "http://1.swpucourse.sinaapp.com/GetCourse.php",
          dataType: "jsonp",
          data: $("#form").serialize(),
          jsonp: "jsoncallback",
          cache: false,
          success: function(data) {
          	if (data != null){
            	var n = $('input:radio:checked').val();
            	if (n == 1) {
            		$("#course_list").empty();
            		var b = '';
            		var length = data.length;
            		for(var i = 0; i < length; i++){
            			if(i%3 == 0){
            				b = b + "<li data-theme='f'><a><h2>" + data[i].name + "</h2>" + "<p>" + 
            				data[i].addr + "，" +
            				data[i].room + "，" +
            				"星期" + data[i].week + "，" +
            				"第" + data[i].seq + "节，<b>" + 
            				data[i].teacher + "</b>，" +
            				data[i].start + "-" +
            				data[i].end + "周" + "</p></a></li>";
            			} else if (i%3 == 1){
            				b = b + "<li data-theme='c'><a><h2>" + data[i].name + "</h2>" + "<p>" + 
            				data[i].addr + "，" +
            				data[i].room + "，" +
            				"星期" + data[i].week + "，" +
            				"第" + data[i].seq + "节，<b>" + 
            				data[i].teacher + "</b>，" +
            				data[i].start + "-" +
            				data[i].end + "周" + "</p></a></li>";
            			} else {
            				b = b + "<li data-theme='a'><a><h2>" + data[i].name + "</h2>" + "<p>" + 
            				data[i].addr + "，" +
            				data[i].room + "，" +
            				"星期" + data[i].week + "，" +
            				"第" + data[i].seq + "节，<b>" + 
            				data[i].teacher + "</b>，" +
            				data[i].start + "-" +
            				data[i].end + "周" + "</p></a></li>";
            			}
            		}
            		$("#course_list").append(b);
            		$("#course_page").page();
            		$('#course_list').listview('refresh'); 
               		window.location.href="#course_page"; 
            	} else if (n == 2) {
            		$("#teacher_list").empty();
            		var c = '';
            		var length = data.length;
            		for(var i = 0; i < length; i++){
            			if(i%3 == 0){
            				c = c + "<li data-theme='f'><a><h2>" + data[i].name + "</h2>" + "<p>" + 
            				data[i].addr + "，" +
            				data[i].room + "，" +
            				"星期" + data[i].week + "，" +
            				"第" + data[i].seq + "节，<b>" + 
            				data[i].teacher + "</b>，" +
            				data[i].start + "-" +
            				data[i].end + "周" + "</p></a></li>";
            			} else if (i%3 == 1){
            				c = c + "<li data-theme='c'><a><h2>" + data[i].name + "</h2>" + "<p>" + 
            				data[i].addr + "，" +
            				data[i].room + "，" +
            				"星期" + data[i].week + "，" +
            				"第" + data[i].seq + "节，<b>" + 
            				data[i].teacher + "</b>，" +
            				data[i].start + "-" +
            				data[i].end + "周" + "</p></a></li>";
            			} else {
            				c = c + "<li data-theme='a'><a><h2>" + data[i].name + "</h2>" + "<p>" + 
            				data[i].addr + "，" +
            				data[i].room + "，" +
            				"星期" + data[i].week + "，" +
            				"第" + data[i].seq + "节，<b>" + 
            				data[i].teacher + "</b>，" +
            				data[i].start + "-" +
            				data[i].end + "周" + "</p></a></li>";
            			}	
            		}
            		$("#teacher_list").append(c);
            		$("#teacher_page").page();
            		$('#teacher_list').listview('refresh'); 
              		window.location.href="#teacher_page";
            	}
          	} else  {
          		layer.open({
          			content: '没找到相关信息哦～<b>(๑•́ ₃ •̀)</b>',
          			btn: ['恩，我重新输入']
        		});
          	}
      	}
        })
      }
    });
  })
  </script>
</body>
</html>